<template>
  <van-action-sheet
    v-model="show"
    :title="title"
    :cancel-text="cancelText"
  >
    <van-cell-group>
      <van-cell
        class="selectAppAccount"
        v-for="(item,index) in userList"
        :key="index"
        @click="selectUser(item)"
      >
      <!-- userType 1是公众号或者小程序  2是app -->
        <template #title>
          <img
            :src="item.userType==='1'?wechatLogoImg:appLogoImg"
            alt=""
            class="account-item"
          >
          <span>{{item.userName}}</span>
          <span v-if="item.isCommon==='1'&&isMultiuser!=='0'">上次使用</span>
        </template>
      </van-cell>
    </van-cell-group>
  </van-action-sheet>

</template>


<script>
import { ActionSheet, Cell, CellGroup } from "vant";
import apiCash from "@/common/api/apiCash";
import store from "@/store";
import { mapGetters } from "vuex";
export default {
  name: "ExchangeActionSheet",
  components: {
    [ActionSheet.name]: ActionSheet,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  props: {
    exchangeInfo: {
      type: Object,
      default: {},
    },
    title: {
      type: String,
      default: "",
    },
    cancelText: {
      type: String,
      default: "",
    },
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    exchangeInfo: {
      deep: true,
      handler: function (newVal) {
        this.info = newVal;
      },
    },
    isShow: function (val) {
      this.show = val;
    },
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  data() {
    return {
      show: false,
      appLogoImg: require("../common/imgs/app-logo.png"),
      wechatLogoImg: require("../common/imgs/wechat-logo.png"),
      isMultiuser: "",
      userList: [],
      token: "",
    };
  },
  creaated() {
    this.show = this.isShow;
    this.info = this.exchangeInfo;
  },
  methods: {
    showSheet() {
      this.show = true;
      if (!this.token && !this.userList.length) {
        this.getToken();
      }
      if (this.token && !this.userList.length) {
        this.getUserList(this.token);
      }
    },
    hideSheet() {
      this.show = false;
    },
    selectUser(info) {
      this.$emit("selectUser", info);
    },
    getToken() {
      this.$toast.loading();
      apiCash.getTokenInfo({ userId: this.userInfo.userId }).then((data) => {
        let token = data.data.token || "";
        this.token = token;
        if (token) {
          this.getUserList(token);
        }
      });
    },
    getUserList(token) {
      this.$toast.loading();
      apiCash
        .getUserList({
          token: token,
          unionId: this.userInfo.unionId,
        })
        .then((data) => {
          this.$toast.clear();
          this.getUserListSuccess(data.data);
        });
    },
    getUserListSuccess(data) {
      let users = data.users;
      this.isMultiuser = data.isMultiuser;
      for (let index in users) {
        let tempUserId = users[index].userId;
        let tempName =
          "蔚来" +
          users[index].userId.slice(0, 5) +
          "*****" +
          tempUserId.substring(tempUserId.length - 4);
        this.$set(users[index], "userName", tempName);
      }
      this.userList = users;
    },
  },
};
</script>

<style scoped lang="less">
.van-cell__title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  img {
    width: 80px;
    height: 80px;
  }
  span:nth-child(2) {
    font-size: 28px;
    color: #222222;
    margin: 0 20px;
  }
  span:nth-child(3) {
    height: 30px;
    padding: 0 15px;
    background: #ffeee2;
    border-radius: 15px;
    font-size: 22px;
    color: #ff6616;
    line-height: 30px;
  }
}
</style>
